<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/WEB-INF/common/hplus-css.jsp"%>
    <link href="${path}/assets/hplus/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
</head>
<body>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>角色组管理</h5>
                    </div>
                    <div class="ibox-content">
                        <form action="${path}/role/query" role="form" class="form-inline query-form">
                            <div class="form-group">
                                <label for="name" class="sr-only">角色名称</label>
                                <input type="text" placeholder="请输入角色名称" id="nameZh" name="nameZh" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="mark" class="sr-only">标识</label>
                                <input type="text" placeholder="请输入角色标识" id="nameEn" name="nameEn" class="form-control">
                            </div>
                            <div class="form-group">
                                <select class="form-control" id="status" name="status">
                                    <option value="">状态</option>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                            <button type="button" id="btn-query" class="btn btn-primary">查询</button>
                            <button type="button" id="btn-reset" class="btn btn-warning">重置</button>
                            <button type="button" id="btn-add" class="btn btn-success fr">添加</button>
                        </form>
                        <div class="jqGrid_wrapper">
                            <table id="table_role"></table>
                            <div id="pager_role"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%@include file="/WEB-INF/common/hplus-js.jsp"%>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
            $.jgrid.defaults.styleUI = 'Bootstrap';
            $("#table_role").jqGrid({
            	url : "${path}/role/query", 
                mtype : "POST",
                datatype : "JSON",
                jsonReader:{
                   	id: "id", //相当于设置主键
		           	root: "result",//Json数据
		           	total: "allPage",//总页数
					page: "page", //当前页
					records: "allCount",//总记录数
					repeatitems: false
                },
                altRows: true,//单双行样式不同
                altclass: 'differ',
                autowidth: true,
                shrinkToFit: true,
                height:353,
                rowNum: 10,
                rowList: [10, 20, 30],
                colNames: [ '角色名称','标识', '状态', '操作'],
                colModel: [
                   {
                        name: 'nameZh',
                        index: 'nameZh',
                        width: 30
                    },{
                        name: 'nameEn',
                        index: 'nameEn',
                        width: 30
                    },{
                        name: 'status',
                        index: 'status',
                        width: 15,
                        formatter:function(cellvalue, options, rowObject){
                        	if(cellvalue == '0'){
                        		return "<span class='red'>禁用</span>";  
                        	}
                        	return "<span class='green'>正常</span>";  
                        }
                    },{
                        name: 'operator',
                        index: 'operator',
                        width: 20,
                        formatter:function(cellvalue, options, rowObject){
                        	var html = "<a class='linkbtn' onclick=\"editRole('"+rowObject.id+"')\"><i class='fa fa-pencil' title='编辑'></i></a>";
                        	if(rowObject.status == 1){
                        		html += "<a class='linkbtn' onclick=\"enableRole(false,'"+rowObject.id+"','"+rowObject.nameZh+"')\"><i class='fa fa-close' title='禁用'></i></a>";
                        	}else{
                        		html += "<a class='linkbtn' onclick=\"enableRole(true,'"+rowObject.id+"','"+rowObject.nameZh+"')\"><i class='fa fa-check' title='启用'></i></a>";
                        	}
                            return html;  
                        }
                    }
                ],
                pager: "#pager_role",
                viewrecords: true,
                hidegrid: false,
                loadonce: true
            });
            $(window).bind('resize', function () {
                var width = $('.jqGrid_wrapper').width();
                $('#table_role').setGridWidth(width);
            });
            $(window).trigger("resize");
            $("#btn-add").click(function(){
            	layer.open({
                    type: 2,
                    title: '添加用户',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['800px', '400px'],
                    content: '${path}/role/add' //iframe的url
                });
            });
            $("#btn-query").click(function(){
            	$("#table_role").jqGrid('setGridParam', {
                    url : "${path}/role/query",
                    datatype:'json',
                    postData : {
                    	"nameZh":$("#nameZh").val(),
                    	"nameEn":$("#nameEn").val(),
                    	"status":$("#status option:selected").val()
                    	
                    }, 
                    page : 1
                }).trigger("reloadGrid"); //重新载入
            });
            
        });
        function editRole(id){
            layer.open({
                type: 2,
                title: '修改角色',
                shadeClose: true,
                shade: 0.5,
                area: ['800px', '400px'],
                content: '${path}/role/edit/' + id //iframe的url
            });
        }
        function enableRole(flag,id,name){
        	var op = (flag?"启用":"禁用");
        	parent.layer.confirm("您确定要"+op+"该角色吗?", {
        	    btn: ['确定','取消'], //按钮
        	    shade: true, //不显示遮罩
        	    shadeClose: true,
                shade: 0.5,
        	}, function(){
        		$.ajax({
                    type: "POST",
                    url: "${path}/role/enable",
                    data:{"status":(flag?1:0),"id":id},
                    dataType: "json",
                    success: function(json){
                        if(json.response.header.rc == 0){
                        	parent.layer.closeAll();
                        	layer.msg(op+'成功', {icon: 1});
                        	setTimeout(function(){
                                location.reload();
                            }, 500); 
                        }else{
                        	layer.msg(op + '发生错误:' + json.msg, {icon: 5});
                        }                    
                    }
                });
        		 
        	}, function(){
        	    
        	});
        }
    </script>
</body>
</html>
